<template>
  <div class="search">
    <naviber />
    <div class="table">
      <p>Search</p>
      <!-- <div class="inputBox">
        <input type="text" />
        <div class="searchBtn">
          <img src="@/assets/images/white_search.png" alt="" />
        </div>
      </div> -->
    </div>
    <div class="two_nav clearfloat">
      <div class="two_nav_title">Search results</div>
      <!-- <div class="item_box">
        <swiper ref="swiper_aboutUs" :options="swiperOption">
          <swiper-slide class="swiper-slide">
            <router-link exact :to="{ name: 'en_social' }" class="two_nav_item">
              <span>专业人员</span>
            </router-link>
          </swiper-slide>
          <swiper-slide class="swiper-slide">
            <router-link exact :to="{ name: 'en_campus' }" class="two_nav_item">
              <span>专业领域</span>
            </router-link>
          </swiper-slide>
          <swiper-slide class="swiper-slide">
            <router-link exact :to="{ name: 'en_life' }" class="two_nav_item">
              <span>新闻资讯</span>
            </router-link>
          </swiper-slide>
        </swiper>
      </div> -->
    </div>
    <div class="searchBox news personnel_list">
      <!-- 专业人员 -->
      <div v-if="personnelList.length > 0" class="personnel_info">
        <router-link
          v-for="(item, index) in personnelList"
          :key="index"
          :to="{ name: 'en_personnel_details', query: { id: item.id } }"
          class="personnel_item clearfloat"
        >
          <!-- <div class="img">
            <div
              class="imgBox"
              :style="{ backgroundImage: 'url(' + item.image_input + ')' }"
            ></div>
          </div> -->
           <el-image class="img" :src="item.image_input" fit="cover"></el-image>
          <div class="personnel_abstract">
            <div class="abstract_top clearfloat">
              <h1 class="info_name">{{ item.title }}</h1>
              <div class="info_type">{{ item.category_name }}</div>
              <div class="location">
                <img src="@/assets/images/location.png" alt />
                <span>{{ item.office_name }}</span>
              </div>
            </div>
            <div class="business">
              <span>Practice Area:</span>
              <span v-for="(i, index) in item.service_name" :key="index">{{
                i
              }}</span>
            </div>
            <div class="introduce">
              <h3>Professional experience:</h3>
              <p>{{ item.synopsis }}</p>
            </div>
          </div>
        </router-link>
      </div>
      <!-- 专业领域 -->
      <div v-if="fieldList.length > 0" class="problem_list">
        <div
          class="problem_item"
          v-for="(item, index) in fieldList"
          :key="index"
          @click="onRelatedList(item.id)"
        >
          <h5>{{ item.title }}</h5>
          <p>{{ item.content }}</p>
        </div>
      </div>
      <!-- 专业新闻 -->
      <div v-if="newsList.length > 0" class="professional_news_list">
        <router-link
          v-for="(item, index) in newsList"
          :key="index"
          :to="{ name: 'en_professional_details', query: { id: item.id } }"
          class="professional_news_item "
        >
          <!-- <div class="img">
            <div
              class="imgBox"
              :style="{ backgroundImage: 'url(' + item.image_input + ')' }"
            ></div>
          </div> -->
          <el-image class="img" :src="item.image_input" fit="cover"></el-image>
          <div class="news_abstract">
            <h3>{{ item.title }}</h3>
            <p>{{ item.content }}</p>
            <div class="news_time">
              <img src="@/assets/images/news_time.png" alt />
              <span>{{ item.add_time }}</span>
            </div>
            <div class="details_botton">More</div>
          </div>
        </router-link>
      </div>
      <!-- 无数据提示 -->
      <transition name="showTitleImg">
        <div class="hiddenImg" v-if="showTitleImg">
          <img src="@/assets/images/hiddenImg.png" alt="" />
          <p>No more data</p>
        </div>
      </transition>
      <div class="searchPageSizeHeight" v-if="count > 0"></div>
      <div class="searchPageSize" v-if="count > 0">
        <el-pagination
          :page-size="10"
          :total="count"
          background
          layout="prev, pager, next"
          @current-change="pageSize"
        ></el-pagination>
      </div>
    </div>
    <footer_ />
  </div>
</template>
<script>
import naviber from "../naviber/naviber";
import footer_ from "../footer/footer";
import { navSearch } from "@/api/home.js";
export default {
  data() {
    return {
      swiperOption: {
        slidesPerView: "auto",
        spaceBetween: 0,
        // 鼠标控制滚动
        // mousewheel: {
        //   releaseOnEdges: true
        // },
        //设置点击箭头
        navigation: {
          nextEl: "#swiper-button-next",
          prevEl: "#swiper-button-prev"
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: false, //修改swiper的父元素时，自动初始化swiper
        onSlideChangeEnd: function(swiper) {
          swiper.update();
          mySwiper.startAutoplay();
          mySwiper.reLoop();
        },
        //鼠标变成抓手型
        grabCursor: true
        //开启鼠标滚轮控制Swiper切换
        // mousewheel: true,
      },
      personnelList: [],
      fieldList: [],
      newsList: [],
      searchCate: "",
      count: 0
    };
  },
  watch: {
    "$store.state.headTitle.searchCate": {
      deep: true,
      handler: function(newValue, oldValue) {
        this.searchCate = newValue;
        this.getSearch(1);
      }
    },
    "$store.state.headTitle.searchInput": {
      deep: true,
      handler: function(newValue, oldValue) {
        this.searchInput = newValue;
        this.getSearch(1);
      }
    },
    "$store.state.headTitle.ifSearchFocus": {
      deep: true,
      handler: function(newValue, oldValue) {
        this.ifSearchFocus = newValue;
      }
    }
  },
  computed: {
    showTitleImg: function() {
      if (this.ifSearchFocus) {
        return false;
      }
      if (
        this.personnelList.length < 1 &&
        this.fieldList.length < 1 &&
        this.newsList.length < 1
      ) {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    let store = this.$store.state.headTitle;
    this.searchCate = store.searchCate;
    this.searchInput = store.searchInput;
    this.getSearch(1);
  },
  methods: {
    pageSize(e) {
      this.getSearch(e);
    },
    //点击侧边导航栏  相关案例
    onRelatedList(id) {
      this.$router.push({
        name: "en_fieldDetails",
        query: { id: id, cid: this.cid, search: true }
      });
    },
    getSearch(page) {
      navSearch({
        type: this.searchCate,
        title: this.searchInput,
        page,
        size: 10
      }).then(res => {
        switch (this.searchCate) {
          case "1":
            this.personnelList = res.data.data;
            this.fieldList = [];
            this.newsList = [];
            break;
          case "2":
            this.personnelList = [];
            this.fieldList = res.data.data;
            this.newsList = [];
            break;
          case "3":
            this.personnelList = [];
            this.fieldList = [];
            this.newsList = res.data.data;
            break;
        }
        this.count = res.data.count;
      });
    }
  },
  components: {
    naviber,
    footer_
  }
};
</script>

<style scoped src="../news/sass/news.css"></style>
<style scoped src="../personnel/sass/personnel.css"></style>
<style scoped src="./sass/search.css"></style>
